<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="false">
			<block slot="content">我的</block>
		</cu-custom>
		<view class="cu-list menu-avatar">
			<!-- 用户信息 -->
			<view class="cu-item cur">
				<view class="cu-avatar radius lg" :style="'background-image:url(' + userInfo.avatar + ');'"
					@click="toZone(userInfo.id)"></view>
				<view class="content">
					<view>
						<view class="text-cut">{{ userInfo.nickname }}</view>
						<!-- <view class="cu-tag round bg-orange sm">VIP</view> -->
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-mail text-orange margin-right-xs"></text>
							{{ userInfo.email }}
						</view>
					</view>
				</view>
				<view class="action">
					<!-- <view class="text-grey text-xs">{{ new Date().getFullYear() }}</view> -->
					<view class="cuIcon-noticefill text-gray my-notice-icon" @click="toMyNotice">
						<view v-show="noticesPageInfo.total > 0" class="cu-tag badge my-badge">
							{{ noticesPageInfo.total > 99 ? '99+' : noticesPageInfo.total }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下方菜单 -->
		<view class="cu-list menu">
			<view class="cu-item" @click="toMyCollection">
				<view class="content">
					<text class="cuIcon-favorfill text-grey"></text>
					<text class="text-grey">我的收藏</text>
				</view>
				<view class="action"><text class="cuIcon-right text-gray"></text></view>
			</view>
			<view class="cu-item" @click="toMyLikes">
				<view class="content">
					<text class="cuIcon-appreciatefill text-grey"></text>
					<text class="text-grey">我的点赞</text>
				</view>
				<view class="action"><text class="cuIcon-right text-gray"></text></view>
			</view>
			<view class="cu-item" @click="toMyPublish">
				<view class="content">
					<text class="cuIcon-picfill text-grey"></text>
					<text class="text-grey">我发布的</text>
				</view>
				<view class="action"><text class="cuIcon-right text-gray"></text></view>
			</view>
			<view class="cu-item" @click="toMyInfos">
				<view class="content">
					<text class="cuIcon-myfill text-grey"></text>
					<text class="text-grey">个人信息</text>
				</view>
				<view class="action"><text class="cuIcon-right text-gray"></text></view>
			</view>
			<view class="cu-item margin-top" @click="logout">
				<view class="content flex justify-center"><text class="text-grey text-center">退出</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkTokenInStore
	} from '../../permission/index';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		logoutApi,
		fetchNoticesApi
	} from '../../api/http';
	export default {
		data() {
			return {
				noticesPageInfo: {
					current: 1,
					size: 10,
					total: 0,
					records: []
				}
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.userInfo,
				token: state => state.token
			})
		},
		onLoad() {
			checkTokenInStore();
		},
		onShow() {
			fetchNoticesApi({
				page: this.noticesPageInfo.current,
				limit: this.noticesPageInfo.size,
				ownerId: this.userInfo.id,
				status: 0
			}).then(res => {
				this.noticesPageInfo = res.data;
			});
		},
		methods: {
			...mapMutations(['removeLoginInfo']),
			toMyPublish() {
				uni.navigateTo({
					url: '../my_publish/my_publish'
				});
			},
			toMyCollection() {
				uni.navigateTo({
					url: '../my_collection/my_collection'
				});
			},
			toMyLikes() {
				uni.navigateTo({
					url: '../my_likes/my_likes'
				});
			},
			toMyNotice() {
				uni.navigateTo({
					url: '../my_notice/my_notice'
				});
			},
			toMyInfos() {
				uni.navigateTo({
					url: '../my_infos/my_infos'
				});
			},
			toZone(userId) {
				uni.navigateTo({
					url: '../zone/zone?id=' + userId
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: res => {
						if (res.confirm) {
							logoutApi({
								token: this.token
							}).then(res => {
								this.removeLoginInfo();
								uni.redirectTo({
									url: '../login/login'
								});
							});
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.my-notice-icon {
		font-size: 50rpx;

		.my-badge {
			position: absolute;
			top: 25rpx;
			right: 5rpx;
		}
	}
</style>
